<template>
  <div class="assessStep">
    <el-tabs v-model="activeName">
      <el-tab-pane label="评估管理" name="1">
        <div class="tabBox ">
          <el-tabs ref="tabs" v-model="active" class="tabs" @tab-click="nodeClick">
            <el-tab-pane v-for="(item,index) in stepArr" :key="index" :label="item" :name="zStr(index)">
              <span slot="label">
                <div v-if="active == index" class="iconCurrent">{{ index + 1 }}</div>
                <div v-else-if="active > index - 1" class="iconOK">{{ index + 1 }}</div>
                <div v-else class="iconNO">{{ index + 1 }}</div>
                <div :class="[active > index - 1 ? 'textCurrent' : '', active == index ? 'textOK' : '']">{{ item }}</div>
              </span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="box-form">
          <step1 v-if="active === '0'" :info="model.evaluateBasic" @next="next" />
          <step2 v-else-if="active === '1'" :info="model.evaluateObject" :evaluate-basic="model.evaluateBasic" @back="back" @next="next" />
          <step3 v-else-if="active === '2'" :info="model.providerContacts" @back="back" @next="next" />
          <step4 v-else-if="active === '3'" :info="model.diagnoseMedicate" @back="back" @next="next" />
          <step5 v-else-if="active === '4'" :info="model.health" :name="model.evaluateBasic.name" :ins-no="model.insNo" @back="back" @next="next" />
          <step6 v-else-if="active === '5'" :info="model.capabilityEvaluation" @back="back" @next="next" />
          <step7 v-else-if="active === '6'" :info="model.athleticAbility" @back="back" @next="next" />
          <step8 v-else-if="active === '7'" :info="model.mentalState" @back="back" @next="next" />
          <step9 v-else-if="active === '8'" :info="model.perceptionSocialParticipation" @back="back" @next="next" />
          <step10 v-else-if="active === '9'" :count="count" @back="back" @next="next" />
          <step11 v-else-if="active === '10'" :info="info11" @back="back" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="流程记录" name="2">
        <assessProcessRecord v-if="activeName === '2'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { stateTagList } from './components/data'
import step1 from './components/step1'
import step2 from './components/step2'
import step3 from './components/step3'
import step4 from './components/step4'
import step5 from './components/step5'
import step6 from './components/step6'
import step7 from './components/step7'
import step8 from './components/step8'
import step9 from './components/step9'
import step10 from './components/step10'
import step11 from './components/step11'
import { getProvideJGAssessDetails } from '@/api/provideJGAssess'
import { mapState } from 'vuex'
import assessProcessRecord from './components/assessProcessRecord'
export default {
  components: {
    step1,
    step2,
    step3,
    step4,
    step5,
    step6,
    step7,
    step8,
    step9,
    step10,
    step11,
    assessProcessRecord
  },
  data() {
    return {
      stateTagList: stateTagList,
      model: {},
      info11: {},
      count: '',
      active: '', // 第几步
      stepArr: [],
      stepArrBit: ['评估信息表', '评估对象基本信息表', '信息提供者及联系人信息表', '疾病诊断和用药情况表', '健康相关问题'],
      stepArrAll: ['评估信息表', '评估对象基本信息表', '信息提供者及联系人信息表', '疾病诊断和用药情况表', '健康相关问题', '老年人能力评估表', '基础运动能力评估表', '精神状态评估表', '感知觉与社会参与评估表', '老年人能力总得分', '老年人能力评估报告'],
      activeName: '1',
      updatePageState: '',
      previousRouteName: '' // 前一个路由名称
    }
  },
  // 进入路由触发
  beforeRouteEnter: (to, from, next) => {
    to.meta.isShowBack = true
    to.meta.title = to.query.title
    next(vm => {
      vm.previousRouteName = from.path
    })
  },
  computed: {
    ...mapState({
      evaluateNo: state => state.generalStore.evaluateNo
    })
  },
  created() {
    // 更新页面状态标识缓存起来 add edit
    this.updatePageState = this.$route.query.updatePageState
    const source = this.$route.query.source
    const isAudit = this.$route.query.isAudit
    if (source === 'assessJG' && !isAudit) {
      this.stepArr = [...this.stepArrBit]
    } else {
      this.stepArr = [...this.stepArrAll]
    }
  },
  mounted() {
    this.$store.commit('generalStore/SET_evaluateNo', this.$route.query.no)
    this.getDeatils(1)
  },
  methods: {
    getDeatils(isgo) {
      if (!this.evaluateNo) {
        this.$store.dispatch('app/setLoading', false)
        return
      }
      this.$store.dispatch('app/setLoading', true)
      getProvideJGAssessDetails(this.evaluateNo).then((res) => {
        // console.log('详情结果', res)
        if (res.status === 0) {
          this.model = res.data || {}
          this.$store.commit('generalStore/SET_evaluateNo', this.model.evaluateNo)
          if (isgo) {
            if (this.updatePageState === 'edit') {
              if (this.model.evaluateStep < 11) {
                // console.log('this.model.evaluateStep', this.model.evaluateStep)
                // console.log('this.model.evaluateStatus', this.model.evaluateStatus)
                this.active = String(this.model.evaluateStep)
                if (this.model.evaluateStep === 5 && this.model.evaluateStatus === 2) {
                  this.active = '4'
                  this.stepArr = [...this.stepArrBit]
                } else if (this.model.evaluateStatus === 2 && this.model.evaluateStep === 5) { // 前五步编辑
                  this.active = '4'
                  this.stepArr = [...this.stepArrBit]
                }
              } else if (this.model.evaluateStep === 11) {
                this.active = String(Number(this.model.evaluateStep) - 1)
              }
            } else {
              this.active = '0'
              const isAudit = this.$route.query.isAudit
              if (isAudit) {
                this.active = '10'
              }
              this.stepArr = [...this.stepArrAll]
              if (this.model.evaluateStatus === 3 && this.model.evaluateStep === 5) {
                this.stepArr = [...this.stepArrBit]
              } else if (this.model.evaluateStatus === 2 && this.model.evaluateStep === 5) { // 前五步查看
                this.active = '0'
                this.stepArr = [...this.stepArrBit]
              }
            }
          }
          // console.log('this.active', this.active)
          if (this.active === '9') {
            const capabilityEvaluationT = this.model.capabilityEvaluation.totalScore
            const athleticAbilityT = this.model.athleticAbility.totalScore
            const mentalStateT = this.model.mentalState.totalScore
            const perceptionSocialParticipationT = this.model.perceptionSocialParticipation.totalScore
            this.count = capabilityEvaluationT + athleticAbilityT + mentalStateT + perceptionSocialParticipationT
          }
          if (this.active === '10') {
            this.active10()
          }
          // console.log('步骤主页 model', this.model)
        } else {
          this.$message.warning(res.message || '操作失败！')
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    back() {
      if (this.active > 0) {
        this.active = String(Number(this.active) - 1)
        this.getDeatils()
      }
    },
    next() {
      if (this.active < 11) {
        this.active = String(Number(this.active) + 1)
        this.getDeatils()
      }
    },
    zStr(i) {
      return String(i)
    },
    nodeClick(e) {
      // console.log('this.active', this.active)
      // console.log('this.model.evaluateStep', this.model.evaluateStep)
      if (Number(this.active) > Number(this.model.evaluateStep)) {
        this.active = String(this.model.evaluateStep)
        this.$message.warning('请按步骤填写！')
      } else if (Number(this.active) === Number(this.model.evaluateStep)) {
        this.active = String(this.model.evaluateStep)
        if (this.active === '10') {
          this.active10()
        }
      } else if (!this.model.evaluateStep) {
        this.active = '0'
        this.$message.warning('请按步骤填写！')
      } else {
        this.getDeatils()
      }
    },
    active10() {
      const b1 = this.model.capabilityEvaluation.totalScore
      const b2 = this.model.athleticAbility.totalScore
      const b3 = this.model.mentalState.totalScore
      const b4 = this.model.perceptionSocialParticipation.totalScore
      const count = b1 + b2 + b3 + b4
      const step11Data = this.model.evaluationReport || {}
      this.info11 = {
        b1,
        b2,
        b3,
        b4,
        count,
        evaluatePerson: this.model.evaluatePerson,
        carbonCopyPerson: this.model.carbonCopyPerson,
        carbonCopyPersonSign: step11Data.carbonCopyPersonSign,
        level: step11Data.level,
        basis: step11Data.basis,
        finallyLevel: step11Data.finallyLevel,
        evaluatePersonSign: step11Data.evaluatePersonSign,
        name: this.model.applyUserInfo.userName,
        insNo: this.model.insNo,
        // 附件和说明字段放最外层了
        evaluateUrl: this.model.evaluateUrl,
        remark: this.model.remark
      }
      console.log('this.info11', this.info11)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-form{
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
  padding-bottom: 100px;
}
.assessStep{
  padding: 10px 30px;
  background-color: #fff;
  width: 100%;
}
.tabBox{
  width: 100%;
  padding: 16px;
  // border: 1px #d9d9d9 solid;
  ::v-deep .el-step__head.is-success{
    color: var(--subjectColor);
    border-color: var(--subjectColor);
  }
  ::v-deep .el-step__title.is-success{
    color: var(--subjectColor);
  }
  ::v-deep .el-tabs{
    .el-tabs__header{
      margin:0;
      .el-tabs__nav-wrap,.is-scrollable{
        padding: 0px 30px;
      }
      .el-tabs__nav-wrap{
        &::after{
          display:none;
        }
        .el-tabs__nav-scroll{
          // pointer-events: none;
          .el-tabs__active-bar{
            display:none;
            &::after{
              display:none;
            }
          }
          .el-tabs__item{
            position: relative;
            font-size: 18px;
            color:#8297A6;
            width: 166px;
            height: 100px;
            font-style:normal;
            margin:0 22px;
            text-align:center;
            white-space: normal;
            padding:50px 0 30px;
            span{
              div:nth-child(2){
                transform: translateX(-6%);
                width: 200px;
                font-size: 16px;
              }
            }
            .iconCurrent{
              width: 45px;
              height: 45px;
              background-size:100% 100%;
              position:absolute;
              top: 5px;
              right: 56px;
              border-radius: 50%;
              background-color: var(--subjectColor);
              border-radius: 50%;
              text-align: center;
              line-height: 45px;
              color: #fff;
            }
            .iconOK{
              width: 45px;
              height: 45px;
              background-size:100% 100%;
              position:absolute;
              top: 5px;
              right: 56px;
              border: 1px solid var(--subjectColor);
              color: var(--subjectColor);
              border-radius: 50%;
              text-align: center;
              line-height: 45px;
            }
            .iconNO{
              width: 45px;
              height: 45px;
              background-size:100% 100%;
              position:absolute;
              top: 5px;
              right: 56px;
              border: 1px solid #999;
              color: #999;
              border-radius: 50%;
              text-align: center;
              line-height: 45px;
            }
            .textCurrent{
              color: var(--subjectColor);
              // font-weight: 500;
            }
            .textOK{
              color: var(--subjectColor);
              font-weight: 700;
            }
            // 中间线
            &::before{
              content:'';
              display:block;
              width:150px;
              height:1px;
              background:#ccc;
              position:absolute;
              top: 25px;
              right: -100px;
            }
            // 隐藏最后一条中间线
            &:last-child::before{
              opacity:0;
            }
          }
        }
        .el-tabs__nav-prev{
          line-height: 18px;
          margin-top: 24px;
          opacity:1;
          .el-icon-arrow-left{
            width:15px;
            height:29px;
            background: url("~@/assets/img/left-next.png") 0 0 no-repeat;
            background-size:15px 29px;
            &::before{
              display:none;
            }
          }
        }
        .el-tabs__nav-next{
          line-height: 18px;
          margin-top: 24px;
          opacity:1;
          .el-icon-arrow-right{
            width:15px;
            height:29px;
            background: url("~@/assets/img/left-next.png") 0 0 no-repeat;
            transform: rotate(180deg);
            background-size:15px 29px;
            &::before{
              display:none;
            }
          }
        }
      }
    }
  }
}
</style>

